<style lang="scss" scoped>
	.nodata {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>

<template>
	<div ref="container" class="container hasNav hasTabbar">
		<van-nav-bar title="任务中心" fixed />
		<van-sticky :offset-top="46">
			<van-tabs v-model="activeName" type="card" color="#179AFE" @click="changeTab">
				<van-tab title="代办任务" name="1"></van-tab>
				<van-tab title="已办任务" name="2"></van-tab>
				<van-tab title="我发起的" name="3"></van-tab>
				<van-tab title="我收到的" name="4"></van-tab>
			</van-tabs>
		</van-sticky>
		<OrderList v-if="list.length !== 0" type="received" :list="list"></OrderList>
		<div v-else class="nodata">暂无任务数据</div>
		<Tabbar></Tabbar>
		<Loading :isShow="loading"></Loading>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import mixin from '../../mixin/index';

	import Loading from '../../components/Loading';
	import Tabbar from '../../components/Tabbar';
	import OrderList from '../../components/OrderList';

	import {
		getReceiveOrderList,
		receiveOrder
	} from '../../api/order';

	export default {
		name: 'OrderIndex',
		components: {
			Loading,
			Tabbar,
			OrderList
		},
		mixins: [mixin],
		data() {
			return {
				loading: false,
				activeName: 1,
				pageNo: 1,
				count: 10,
				list: [],
				isCompleted: false,
			};
		},
		async beforeMount() {
			await this.getList();
		},
		mounted() {
			this.bindScroll('container', () => {
				if (!this.isCompleted) {
					this.pageNo += 1;
					this.getList();
				}
			});
		},
		methods: {
			changeTab(name) {
				this.activeName = name;
				this.pageNo = 1;
				this.list = [];
				this.getList();
			},
			async getList() {
				try {
					const params = {
						type: this.activeName,
						page: this.pageNo,
						count: this.count,
						serviceTrackTime: 0
					};

					const {
						errorcode,
						errormsg,
						records
					} = await getReceiveOrderList(params);

					if (errorcode == 0) {
						if (records.length === 0) {
							this.isCompleted = true;
						} else {
							this.list.push(...records);
						}
					} else {
						this.$toast(errormsg);
					}

					this.loading = false;
				} catch (error) {
					console.log(error);
					this.loading = false;
				}
			}
		}
	};
</script>
